'use strict';
import React, {
    Component,
    PropTypes
} from 'react';
import ReactDOM, {
    render
} from 'react-dom';
import {
    connect
} from 'react-redux';
import {
    bindActionCreators
} from 'redux';
import {
    R_header
} from './common/index'
import {
    HttpService,
    Toast
} from '../Http';
import {
    taskFinish
} from '../Tools'
import Header from './Common/Header'
import ConfirmBox from './Common/ConfirmBox'
class Gotoactive extends React.Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        this.state = {
            studentname: '',
            teachertel: '',
            bg: 'app-little-pink-radius-button'
        };
    }

    name(e) {
        let val = e.target.value;
        this.setState({
            studentname: val
        });

        if (!!this.state.studentname && !!this.state.teachertel) {
            this.setState({
                bg: 'app-pink-radius-button'
            })
        }
    }

    teachertel(e) {
        let val = e.target.value;
        this.setState({
            teachertel: val
        });

        if (!!this.state.studentname && !!this.state.teachertel) {
            this.setState({
                bg: 'app-pink-radius-button'
            })
        }
    }

    next(studentname, teachertel, e) {
        e.preventDefault();
        let patt = /^[1]\d{10}$/;
        let url = '/app/device/guardianActiveJxt';
        if (!studentname) {
            Toast.toast('请输入宝贝姓名');
            return;
        } else if (!teachertel) {
            Toast.toast('请输入手机号');
            return;
        } else if (!patt.test(teachertel) && !!teachertel) {
            Toast.toast('手机格式不正确');
            return;
        }
        let data = {
            mdtid: this.props.params.mdtid,
            account: localStorage.userphone,
            telephone: this.props.params.telephone,
            studentname: studentname,
            teachertel: teachertel,
            babyname: studentname,
            token: localStorage.appToken,
            weixinclient: 'true'
        }
        if (this.props.params.code == 100073)
            url = '/app/user/synBaby'

        HttpService.query({
            url,
            sync: false,
            data,
            success: (res => {
                if (res.code == 10150 || res.code == 0) {
                    this.endTime = res.data.endtime;
                    this.devicetype = res.data.devicetype;
                    taskFinish('添加孩子', (status, config) => {
                        if (status) {
                            this.config = config;
                            this.setState({
                                show: 1
                            })
                        } else {
                            this.context.router.push(`/success/${this.endTime}/${this.devicetype}`);
                        }
                    })
                } else {
                    Toast.toast(res.msg);
                }
            })
        })
    }

    sure() {
        this.setState({
            show: 0
        })
        this.context.router.push(`/success/${this.endTime}/${this.devicetype}`);
    }

    render() {

        const {
            bg,
            studentname,
            teachertel
        } = this.state;
        const {
            mdtid,
            telephone
        } = this.props.params;
        return (

            <div style={{
                background: '#eee',
                minHeight: '100%',
                paddingTop: '88px'
            }}>

                <R_header title="激活设备" left="1"/>

                <div className="container">
                    <form onSubmit={this.next.bind(this, studentname, teachertel)} name="form">
                        <div className="col-xs-12 app-content-title app-padding-zero">实名认证</div>
                        <div className="col-xs-12 app-white-input">
                            <label className="app-white-input-label">宝贝姓名</label>
                            <input id="number3" type="text" placeholder="请输入宝贝姓名" onChange={this.name.bind(this)} ref='babyname' />
                        </div>
                        <hr className="app-bootstrap-hr"/>
                        <div className="col-xs-12 app-white-input">
                            <label className="app-white-input-label">班主任手机号</label>
                            <input id="number4" type="text" placeholder="请输入班主任手机号码" onChange={this.teachertel.bind(this)} ref='teachertel' />
                        </div>
                        <div className="col-xs-12 app-content-title app-padding-zero">设备信息</div>
                        <div className="col-xs-12 app-white-input">
                            <label className="app-white-input-label">设备IMEI号</label>
                            <input id="number" disabled type="text" placeholder="23764761536276" value={mdtid}/>
                        </div>
                        <hr className="app-bootstrap-hr"/>
                        {this.props.params.type==2?
                        <div className="col-xs-12 app-white-input">
                            <label className="app-white-input-label">设备手机号</label>
                            <input id="number2" type="text" disabled placeholder="请输入设备手机号" value={telephone}/>
                        </div>:null}
                        <label style={{
                            display: 'block'
                        }}>

                            <div className={"col-xs-12 text-center " + bg} style={{
                                marginTop: '1.5rem'
                            }}>激活设备
                            </div>
                            <button type="submit" style={{
                                display: 'none'
                            }}></button>
                        </label>
                    </form>
                </div>
                <ConfirmBox config={this.config} show={this.state.show} cancel={this.sure.bind(this)}/>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {};
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({}, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(Gotoactive);
